<template>
	<NavBar :obj="{ title: '商务合作', color: '#000', backgroundColor: '#fff' }" />
	<view class="layout-box">
		<view class="layout">
			<view class="label">联系人</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写联系人" v-model="formRef.name" />
		</view>
		<view class="layout">
			<view class="label">联系方式</view>
			<input class="inp" placeholder-class="place-inp" placeholder="请填写联系方式" v-model="formRef.contact" />
		</view>
	</view>
	<view class="layout-box">
		<view class="layout">
			<view class="label">合作内容</view>
			<textarea class="inp textarea" placeholder-class="place-inp" placeholder="请填写您的合作内容" v-model="formRef.desc"></textarea>
		</view>
	</view>

	<view class="fixed-bottom">
		<view class="btn" @click="cooperationSave">
			<text>提交</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading } from '/service/port';
	import { goBack } from '../../service/port';
	const formRef = ref({
		name: '',
		contact: '',
		desc: ''
	});

	async function cooperationSave() {
		if (!formRef.value.name) {
			hint('请填写联系人');
			return false;
		}
		if (!formRef.value.contact) {
			hint('请填写联系方式');
			return false;
		}
		if (!formRef.value.desc) {
			hint('请填写您的合作内容');
			return false;
		}
		loading();
		let res = await port('cooperationSave', formRef.value);
		await nextTick();
		closeLoading();
		hint(res.msg);
		goBack();
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.layout-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 26rpx 30rpx;
		padding: 0 23rpx;
		.layout {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #eeeeee;
			display: flex;

			justify-content: space-between;
			&:last-child {
				border-bottom: none;
			}
			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				width: 27%;
			}
			.inp {
				font-size: 28rpx;
				color: #333333;
				flex: 1 1 0%;
			}
			.place-inp {
				color: #bdbdbd;
				flex: 1 1 0%;
			}
			.textarea {
				height: 200rpx;
			}
			.icon {
				margin-right: 30rpx;
			}
		}
	}
</style>
